<template>
  <di class="vanilla">
    <div class="title">
      <div class="tab">
        <span
          @click="changeSelectOrdinal(item)"
          v-for="(item, index) in selectNames"
          :key="index"
          class="none"
          :class="selectOrdinal.status === item.status ? 'active' : ''"
        >{{ item.name }}({{ item.count }})</span>
      </div>
      <div class="search">
        <autocomplete :code="code
            " @getlist="changeCode" :size="'small'"></autocomplete>
        <el-button type="primary" size="small" @click="activeAddition()">录入</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="tables">
      <el-table
        :data="tableData"
        stripe
        :border="true"
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        ref="table"
        :key="isUpdate"
        :cell-style="changeCellStyle"
        height="500"
        @sort-change="changeSort"
        v-loading="loading"
      >
        <el-table-column
          fixed="left"
          type="index"
          label="序号"
          width="55"
          align="center"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column label="代码" align="center" prop="stockcode" :sortable="'custom'"></el-table-column>
        <el-table-column label="简称" align="center" prop="name" :sortable="'custom'"></el-table-column>
        <el-table-column label="结构" align="center" prop="aliasname" :sortable="'custom'"></el-table-column>
        <el-table-column label="周期" align="center" prop="cycle" :sortable="'custom'"></el-table-column>
        <el-table-column
          label="期权费率"
          width="90"
          align="center"
          prop="qiquanfeilv"
          :sortable="'custom'"
        >
          <template scope="scope">{{ scope.row. qiquanfeilv}}%</template>
        </el-table-column>
        <el-table-column
          label="最新费率"
          width="90"
          align="center"
          prop="last_price"
          v-if="flag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column label="交易对方" width="90" align="center" prop="company" :sortable="'custom'"></el-table-column>
        <el-table-column
          label="交易编号"
          align="center"
          prop="sn"
          show-overflow-tooltip
          :sortable="'custom'"
          width="90"
        ></el-table-column>
        <el-table-column
          label="开仓日期"
          width="130"
          align="center"
          prop="start_date"
          :sortable="'custom'"
        >
          <template slot-scope="scope">{{ $dayjs(scope.row.start_date).format('YYYY-MM-DD') }}</template>
        </el-table-column>
        <el-table-column
          label="到期日"
          align="center"
          width="130"
          prop="end_date"
          :sortable="'custom'"
        >
          <template slot-scope="scope">{{ $dayjs(scope.row.end_date ).format('YYYY-MM-DD') }}</template>
        </el-table-column>
        <el-table-column
          label="开仓规模"
          align="center"
          prop="mingyibenjin"
          :sortable="'custom'"
          width="90"
        ></el-table-column>
        <el-table-column
          label="期初价格"
          width="90"
          align="center"
          prop="qichujiage"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="平仓价格"
          width="90"
          align="center"
          prop="yipingcang"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="存续规模"
          width="90"
          align="center"
          prop="cunxuguimo"
          v-else
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="最新价"
          width="90"
          align="center"
          prop="stock_price"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            {{
            scope.row.stock_price
            ? scope.row.stock_price
            : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="平仓涨幅"
          width="90"
          align="center"
          prop="zhangfu"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="平仓收益"
          width="90"
          align="center"
          prop="xingquanyingshou"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="平仓盈利"
          width="90"
          align="center"
          prop="lirun"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="利润率"
          width="90"
          align="center"
          prop="lirunlv"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="期初价涨幅"
          width="100"
          align="center"
          prop="zhangfu"
          v-if="pincangFlag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <span
              :style="{color:((scope.row.price- scope.row.qichujiage )/ scope.row.qichujiage*100)>0?'#EB4436 !important':'#0E9D58 !important'}"
            >{{((scope.row.price- scope.row.qichujiage )/ scope.row.qichujiage*100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column
          label="平仓价涨幅"
          width="100"
          align="center"
          prop="qichujiage"
          v-if="pincangFlag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <span
              :style="{color:(scope.row.price - scope.row.qichujiage)>0?'#EB4436 !important':'#0E9D58 !important'}"
            >{{ (scope.row.price- scope.row.qichujiage).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="最新期权费率"
          width="110"
          align="center"
          prop="last_price"
          v-if="pincangFlag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="权力金"
          width="90"
          align="center"
          prop="quanyijin"
          v-if="flag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="执行价"
          width="90"
          align="center"
          prop="zhixingjiage"
          v-if="flag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="平衡点"
          width="90"
          align="center"
          prop="pinghangdian"
          v-if="flag"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="买入涨幅"
          width="90"
          align="center"
          prop="zhangfu"
          v-if="flag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.zhangfu>0?'#EB4436 !important':'#0E9D58 !important' } "
            >{{scope.row.zhangfu*100 }}%</span>
          </template>
        </el-table-column>
        <el-table-column
          label="距执行价"
          width="90"
          align="center"
          prop="juzhixingjia"
          v-if="flag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            {{
            scope.row.juzhixingjia
            ? scope.row.juzhixingjia
            : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="距平衡点"
          width="90"
          align="center"
          prop="jupinghangdian"
          v-if="flag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            {{
            scope.row.jupinghangdian
            ? scope.row.jupinghangdian
            : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column label="倒计时" width="150" align="center" v-if="flag" :sortable="'custom'">
          <template slot-scope="scope">
            <Statistic :value="scope.row.end_date" time-indices title :format="'DD HH:mm:ss'"></Statistic>
          </template>
        </el-table-column>
        <el-table-column
          label="行权应收"
          width="90"
          align="center"
          prop="xingquanyinshou"
          v-if="flag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.juzhixingjia">
              <span
                v-if="scope.row.fangxiang==2 && Number(scope.row.qichujiage)<scope.row.stock_price"
              >0</span>
              <span
                v-if="scope.row.fangxiang==2 && Number(scope.row.qichujiage)>scope.row.stock_price"
              >{{scope.row.xingquanyinshou }}</span>
              <span
                v-if="scope.row.fangxiang==1 && Number(scope.row.qichujiage)<scope.row.stock_price"
              >{{scope.row.xingquanyinshou }}</span>
              <span
                v-if="scope.row.fangxiang==1 && Number(scope.row.qichujiage)>scope.row.stock_price"
              >0</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          label="浮动盈润"
          width="90"
          align="center"
          prop="fudongyingli"
          v-if="flag"
          :sortable="'custom'"
        >
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.fudongyingli>0?'#EB4436':'#0E9D58'}"
            >{{ scope.row.fudongyingli }}</span>
          </template>
        </el-table-column>
        <el-table-column label="利润率" width="90" align="center" prop="lirunlv" :sortable="'custom'">
          <template slot-scope="scope">
            <span
              :style="{color:scope.row.lirunlv>0?'#EB4436 !important':'#0E9D58 !important'}"
            >{{ scope.row.lirunlv }}%</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="50" align="center">
          <template slot-scope="scope">
            <el-popover placement="bottom-start" trigger="click" popper-class="mypopover">
              <div class="options">
                <div v-if="selectOrdinal.name=='持仓中'">
                  <el-button type="text" size="small" @click="changeBalanceBuy(scope.row)">平仓下单</el-button>
                </div>
                <div v-if="selectOrdinal.name=='持仓中'">
                  <el-button type="text" size="small" @click="closeAposition(scope.row)">平仓</el-button>
                </div>
                <div v-if="selectOrdinal.name=='持仓中'">
                  <el-button type="text" size="small" @click="DddOverdue(scope.row)">价外到期</el-button>
                </div>
                <el-popconfirm title="确定删除吗？" @confirm="deleteDate(scope.row)" :key="scope.row.id">
                  <div slot="reference" style="text-">
                    <el-button type="text" size="small">删除</el-button>
                  </div>
                </el-popconfirm>
                <div>
                  <el-button type="text" size="small" @click="editData(scope.row)">修改</el-button>
                </div>
              </div>
              <span class="el-icon-more" slot="reference"></span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 录入 -->
    <el-dialog :visible.sync="isShowAddtion" width="630px" class="isShowAddtion">
      <template slot="title">
        <div class="title">{{ title }}</div>
      </template>
      <div class="hr"></div>
      <el-form ref="form" :model="positionForm" label-width="80px">
        <div class="copy">
          <textarea class="text" placeholder="在此处粘贴信息，智能识别持仓信息"></textarea>
          <el-button class="button" size="mini">识别</el-button>
        </div>
        <el-form-item label="类型:">
          <div class="list" style="text-align: right;">
            <el-button
              :class="selectType === index ? 'one-active' : 'one'"
              v-for="(item, index) in type"
              :key="index"
              size="mini"
              @click="selectTypes(index)"
            >{{ item }}</el-button>
          </div>
        </el-form-item>
        <el-form-item label="标的:">
          <autocomplete :code="positionForm.stockcode" @getlist="getlist"></autocomplete>
        </el-form-item>
        <el-form-item label="结构:">
          <el-row>
            <el-col :span="10">
              <el-select v-model="positionForm.aliasname" placeholder="请选择" size="small">
                <el-option
                  v-for="(city,index) in aliasname_list"
                  :key="index"
                  :label="city.aliasname"
                  :value="city.aliasname"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="14">
              <el-form-item label="周期">
                <el-select v-model="positionForm.cycle" placeholder="请选择" size="small">
                  <el-option
                    v-for="(city,index) in cycle_list"
                    :key="index"
                    :label="city.cycletxt"
                    :value="city.cycletxt"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="开仓规模">
          <el-col :span="10">
            <el-input size="small" v-model="positionForm.mingyibenjin"></el-input>
          </el-col>
          <el-col :span="4">
            <span>万元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="交易对方">
          <el-row>
            <el-col :span="8">
              <el-autocomplete
                class="inline-input"
                v-model="positionForm.company"
                :fetch-suggestions="querySearch"
                placeholder="请输入交易对方"
                :trigger-on-focus="false"
                size="small"
                v-if="flagInput"
              ></el-autocomplete>
              <el-select v-model="positionForm.company" filterable placeholder="请选择交易对方" v-else>
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <i
                class="el-icon-circle-plus-outline"
                style="font-size:20px"
                @click="flagInput=!flagInput"
              ></i>
            </el-col>
            <el-col :span="14">
              <el-form-item label="交易编号">
                <el-input placeholder="请输入交易编号" size="small" v-model="positionForm.sn"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="起始日">
          <el-row>
            <el-col :span="10">
              <el-date-picker
                size="small"
                v-model="positionForm.start_date"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-col>
            <el-col :span="14">
              <el-form-item label="到期日">
                <el-date-picker
                  size="small"
                  v-model="positionForm.end_date"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="开仓价格">
          <el-col :span="10">
            <el-input size="small" v-model="positionForm.qichujiage"></el-input>
          </el-col>
          <el-col :span="4">
            <span>元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="期权费率:">
          <el-col :span="10">
            <el-input size="small" v-model="positionForm.qiquanfeilv"></el-input>
          </el-col>
          <el-col :span="4">
            <span>%</span>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="saveHolding">确 定 录 入</el-button>
        <el-button @click="closeIsShowAddtion" size="small">返 回</el-button>
      </span>
    </el-dialog>
    <!-- 平仓 -->
    <el-dialog :visible.sync="balance" width="400px" class="balance">
      <template slot="title">
        <div class="title">平仓</div>
      </template>
      <div class="content">
        <el-form label-width="80px">
          <el-form-item label="交易对方">{{ balanceData.name }} {{ balanceData.stockcode }}</el-form-item>
          <el-form-item label="结构/周期">{{ balanceData.aliasname }} {{ balanceData.cycle }}</el-form-item>
          <el-form-item label="平仓日期">
            <el-date-picker
              v-model="balanceForm.real_end_date"
              type="date"
              placeholder="请选择平仓日期"
              size="small"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="平仓价格">
            <el-col :span="16">
              <el-input v-model="balanceForm.close_price" placeholder="请选择平仓价格" size="small"></el-input>
            </el-col>
            <el-col :span="4">元</el-col>
          </el-form-item>
          <el-form-item label="平仓规模">
            <el-col :span="16">
              <el-input
                v-model="balanceForm.pingcangguimo"
                placeholder="请选择平仓规模"
                size="small"
                span="10"
              ></el-input>
            </el-col>
            <el-col :span="4">万元</el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="addBalance" class="enter">确 定</el-button>
        <el-button size="small" @click="balance = false" class="cancellation">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 平仓下单 -->
    <el-dialog :visible.sync="balanceBuy" width="500px" class="balanceBuy">
      <template slot="title">
        <div class="title">平仓下单</div>
      </template>
      <div class="content">
        <div class="list">
          <el-row>
            <el-col :span="4">平仓规模</el-col>
            <el-col :span="8">
              <el-input v-model="value" size="small" placeholder="请输入平仓规模"></el-input>
            </el-col>
            <el-col :span="4">万元</el-col>
          </el-row>
        </div>
        <div class="price">
          <el-button
            v-for="(item,index) in  priceList"
            :key="index"
            size="small"
            :class="activeName==item?'active':''"
            @click="activeName=item"
          >{{ item }}</el-button>
          <el-input size="small" v-if="activeName=='限价'" v-model="checkPrice" placeholder="请输入限价"></el-input>
          <span v-if="activeName=='限价'">元</span>
        </div>
        <div class="summarize">
          <p>
            <span>{{balanceBuyData.company }}</span>
            <span>{{balanceBuyData.stockcode }}</span>
          </p>
          <p>
            <span>{{balanceBuyData.aliasname }}</span>
            <span>{{balanceBuyData.cycle }}</span>
          </p>
          <p>
            <span>开仓日期</span>
            <span>{{ $dayjs((balanceBuyData.start_date *1000)).format('YYYY-MM-DD')}}</span>
          </p>
          <p>
            <span>交易编号</span>
            <span>{{balanceBuyData.sn}}</span>
          </p>
          <p>
            <span>开仓规模</span>
            <span>{{balanceBuyData.mingyibenjin}}万元</span>
            <span>存续规模</span>
            <span>{{balanceBuyData.cunxuguimo}}万元</span>
          </p>
          <p>
            <span>平仓规模</span>
            <span>{{value}}万元</span>
            <span>市价</span>
            <span>现价（{{checkPrice}}元)</span>
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="copy">确 定</el-button>
        <el-button size="small" @click="balanceBuy=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 价外到期 -->
    <el-dialog :visible.sync="overdueVisible" width="400px" class="balance">
      <template slot="title">
        <div class="title">价外到期</div>
      </template>
      <div class="content">
        <el-form label-width="80px">
          <el-form-item label="交易对方">{{overdueData.name }} {{ overdueData.stockcode }}</el-form-item>
          <el-form-item label="结构/周期">{{ overdueData.aliasname }} {{ overdueData.cycle }}</el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="overdueForm.real_end_date"
              type="date"
              placeholder="请选择日期"
              size="small"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="到期价格">
            <el-col :span="16">
              <el-input v-model="overdueForm.close_price" placeholder="请选择到期价格" size="small"></el-input>
            </el-col>
            <el-col :span="4">元</el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="addJiawaie" class="enter">确 定</el-button>
        <el-button size="small" @click="overdueVisible = false" class="cancellation">取 消</el-button>
      </span>
    </el-dialog>
  </di>
</template>

<script>
import autocomplete from "@/components/autocomplete.vue";
import {
  userholding,
  aliascycle,
  statusList,
  saveHolding,
  delHolding,
  closeHolding,
  jiawai,
  saveEdit
} from "@/api/HoldAPosition/index";
import { Statistic } from "element-ui";
export default {
  name: "vanilla",
  components: {
    Statistic,
    autocomplete
  },
  data() {
    return {
      title: "",
      select: [],
      selectOrdinal: {},
      selectNames: [],
      moveLocation: -1,
      tableData: [],
      type: ["香草", "雪球"],
      selectType: 0,
      tabList: [],
      checkList: [],
      securitiesMsg: [],
      aliasname_list: [],
      cycle_list: [],
      isShowAddtion: false,
      form: {},
      isUpdate: false,
      total: 0,
      queryData: {
        page_size: 10,
        page_no: 1
      },
      positionForm: {
        type: 1,
        sn: "",
        stockcode: "",
        aliasname: "", //结构
        cycle: "", //周期
        mingyibenjin: "",
        qichujiage: "",
        qiquanfeilv: "",
        start_date: "",
        end_date: "",
        company: "",
        houduanfeiyong: ""
      },
      restaurants: [],
      balance: false,
      balanceForm: {
        real_end_date: "",
        close_price: "",
        pingcangguimo: ""
      },
      code: "",
      balanceData: {},
      socket: {},
      balanceBuy: false,
      balanceBuyData: {},
      value: 0,
      priceList: ["市价", "限价"],
      activeName: "市价",
      checkPrice: 0,
      overdueVisible: false,
      overdueData: {},
      overdueForm: {
        real_end_date: "",
        close_price: ""
      },
      totalPage: 1,
      flagInput: false,
      loading: false,
      warning: true,
      prop: {}
    };
  },

  mounted() {
    this.getaliascycle();
    this.statusList();
  },
  computed: {
    flag() {
      return this.selectOrdinal.name == "持仓中";
    },
    pincangFlag() {
      return this.selectOrdinal.name == "已平仓";
    }
  },
  methods: {
    async statusList() {
      const { data } = await statusList();
      this.selectNames = data;
      this.selectOrdinal = data[0];
      this.getuserholding();
      this.lazyLoading();
    },
    async getuserholding() {
      this.loading = true;
      const { data } = await userholding({
        ...this.queryData,
        ...this.prop,
        status: this.selectOrdinal.status,
        code: this.code
      });
      this.totalPage = data.page_cou;
      this.total = data.total;
      this.securitiesMsg = data.list.map(item => {
        return item.symbol;
      });
      this.tableData.push(...data.list);
      this.$nextTick(() => {
        this.$refs.table.doLayout();
        this.loading = false;
      });
    },
    changeCellStyle() {
      return "color: #1570e8;font-size:13px;height:32px;padding:0px";
    },
    changeSelectOrdinal(index) {
      this.selectOrdinal = index;
      this.totalPage = 1;
      this.tableData = [];
      this.getuserholding();
    },
    activeAddition() {
      this.title = "添加持仓";
      this.isShowAddtion = true;
    },
    selectTypes(index) {
      this.positionForm.type = index + 1;
      this.selectType = index;
    },
    async getaliascycle() {
      const { data } = await aliascycle();
      this.aliasname_list = data.aliasname_list;
      this.cycle_list = data.cycle_list;
      this.restaurants = data.company_list.map(item => {
        return {
          value: item.name
        };
      });
    },
    async saveHolding() {
      var data = {};
      if ((this.title = "新增录入")) {
        data = await saveHolding(this.positionForm);
      } else {
        data = await saveEdit(this.positionForm);
      }
      if (code.msg != "保存成功") {
        return false;
      }
      this.closeIsShowAddtion();
      this.getuserholding();
    },
    closeIsShowAddtion() {
      this.positionForm = {};
      this.isShowAddtion = false;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    async deleteDate(item) {
      const data = await delHolding({ id: item.id });
      if (data.msg == "删除成功") {
        this.$message({
          type: "success",
          message: data.msg
        });
        this.getuserholding();
      }
    },
    closeAposition(item) {
      this.balance = true;
      this.balanceData = item;
    },
    async addBalance() {
      const data = await closeHolding({
        ...this.balanceForm,
        id: this.balanceData.id
      });
      if (data.msg == "平仓成功") {
        this.$message({
          type: "success",
          message: "平仓成功"
        });
        const { data } = await statusList();
        this.selectNames = data;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
      this.balance = false;
      this.balanceForm = {
        real_end_date: "",
        close_price: "",
        pingcangguimo: ""
      };
      this.getuserholding();
    },
    changeBalanceBuy(item) {
      this.balanceBuyData = item;
      this.balanceBuy = true;
    },
    copy() {
      let oInput = document.createElement("textarea");
      oInput.value = `      ${this.balanceBuyData.company} ${
        this.balanceBuyData.stockcode
      }
      ${this.balanceBuyData.aliasname} ${this.balanceBuyData.cycle}
      开仓日期  ${this.$dayjs(this.balanceBuyData.start_date * 1000).format(
        "YYYY-MM-DD"
      )}
      交易编号 ${this.balanceBuyData.sn}
      开仓规模 ${this.balanceBuyData.mingyibenjin}万元 存续规模 ${
        this.balanceBuyData.cunxuguimo
      }万元
      平仓规模 ${this.value}万元  市价 现价（${this.checkPrice}元)
      `;
      // 页面底部追加输入框
      document.body.appendChild(oInput);
      // 选中输入框
      oInput.select();
      // 执行浏览器复制命令
      document.execCommand("Copy");
      // 弹出复制成功信息
      this.$message.success("复制成功");
      // 复制后移除输入框
      oInput.remove();
      this.balanceBuy = false;
    },
    changeCode(e) {
      this.code = e;
      this.tableData = [];
      this.getuserholding();
    },
    DddOverdue(item) {
      this.overdueData = item;
      this.overdueVisible = true;
    },
    async addJiawaie() {
      const data = await jiawai({
        ...this.overdueForm,
        id: this.overdueData.id
      });
      if (data.msg == "平仓成功") {
        this.$message({
          type: "success",
          message: "平仓成功"
        });
        const { data } = await statusList();
        this.selectNames = data;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
      this.overdueVisible = false;
      this.overdueForm = {
        real_end_date: "",
        close_price: ""
      };
      this.getuserholding();
    },
    editData(data) {
      this.title = "修改持仓";
      this.isShowAddtion = true;
      this.positionForm = data;
    },
    getlist(e) {
      this.positionForm.stockcode = e;
    },
    lazyLoading() {
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", v => {
        const scrollDistance =
          dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        const aa = dom.scrollWidth - dom.scrollLeft - dom.clientWidth;
        if (scrollDistance <= 1) {
          if (this.queryData.page_no >= this.totalPage && this.warning) {
            this.warning = false;
            this.$message.warning("我~是有底线的 (～￣▽￣)～");
            setTimeout(() => {
              this.warning = true;
            }, 1000);
          }
          if (this.queryData.page_no < this.totalPage && !this.loading) {
            this.queryData.page_no++;
            this.getuserholding();
          }
        }
      });
    },
    //排序
    changeSort(prop) {
      this.prop = {
        sort: prop.prop || "",
        order: prop.order || ""
      };
      this.queryData.page_no = 1;
      this.tableData = [];
      this.getuserholding();
    }
  }
};
</script>

<style lang="less" scoped>
.vanilla {
  .title {
    display: flex;
    justify-content: space-between;
    margin-left: 26px;
    height: 50px;
    border-bottom: 2px solid #eff1f5;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 10px;
    .tab {
      height: 50px;
      display: flex;
      .none {
        color: #999999;
        font-size: 16px;
        line-height: 33px;
        height: 100%;
        padding: 0 20px;
        cursor: pointer;
      }
      .active {
        color: #3377ff;
        border-bottom: 2px solid #397dff;
      }
    }
    .search {
      display: flex;
      /deep/ .el-button {
        background: #1657d9;
        height: 30px;
        margin-right: 60px;
        margin-left: 10px;
      }
    }
  }
  .tables {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
  }
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: unset;
  color: #111111;
}
.isShowAddtion {
  .one-active {
    border-color: #457af6;
    color: #fff;
    background: #457af6;
  }
  .dialog-footer {
    width: 100%;
    text-align: center;
    display: inline-block;
    .el-button {
      width: 190px;
      height: 36px;
      &--primary {
        background: #3377ff;
      }
      background: #f4f4f4;
    }
  }
}
.balanceBuy {
  .price {
    margin: 20px 0;
    .el-button {
      width: 94px;
      background: #f4f4f4;
    }
    .active {
      background: #3377ff;
      color: #fff;
      width: 145px;
    }
    .el-input {
      display: inline-block;
      width: 150px;
      margin-left: 20px;
    }
  }
  .summarize {
    width: 464px;
    height: 122px;
    border-radius: 5px;
    background: #fbfbfb;
    p {
      margin: 6px 0;
      font-size: 12px;
      color: #666666;
      span {
        margin-left: 10px;
        &:nth-child(3) {
          margin-left: 25px;
        }
      }
    }
  }
}

.titles {
  &-center {
    padding-left: 20px;
  }
  &-right {
    padding-left: 20px;
  }
  /deep/ .el-checkbox {
    width: 100%;
    margin-right: 0;
  }
}
/deep/.el-statistic {
  .number {
    font-size: 12px;
    color: rgb(21, 112, 232);
  }
}
/deep/.el-table th.el-table__cell > .cell {
  padding-left: unset;
  padding-right: unset;
}
.copy {
  height: 100px;
  width: 460px;
  background: #fbfbfb;
  text-align: right;
  margin-left: 50%;
  transform: translateX(-50%);
  textarea {
    width: 100%;
    border: unset;
    background: #fbfbfb;
    color: #fff;
    height: calc(100% - 40px);
  }
}
/deep/.el-dialog__header {
  padding-top: unset;
  .title {
    border-bottom: 1px solid #e4e7ec;
    padding-left: 0;
  }
}

/deep/ .el-table--border th.el-table__cell:hover {
  background: #ddd;
}
/deep/ .el-table th.el-table__cell {
  background: #f4f4f4;
  font-weight: unset;
  color: #1e2024;
  height: 50px;
  cursor: pointer;
}
.balance {
  /deep/ .el-dialog__body {
    padding: 0 20px;
  }
  /deep/.el-dialog__footer {
    text-align: center;
    border-top: 1px solid #ccc;
  }
  /deep/ .enter {
    width: 150px;
    height: 40px;
    background: #ff8133;
    border-radius: 7.63504px;
    color: #fff;
    border: unset;
  }
  /deep/ .cancellation {
    width: 150px;
    height: 40px;
    background: #f4f4f4;
    border-radius: 7.63504px;
    color: #666666;
    border: unset;
  }
}
</style>
<style lang="less">
.mypopover {
  width: 100px;
  min-width: unset;
  text-align: center;
  div {
    width: 100%;
    border-bottom: 1px solid #f0f3f5;
    .el-button--text {
      color: #111111;
    }
  }
}
</style>